<template>
  <div class="login-wrap">
    <common-header :content="headerTitle" />
    <div class="img-wrap"
         w-750-422
         aspectratio>
      <img src="../../assets/images/login.png"
           alt=""
           aspectratio-content>
    </div>
    <div class="login-box">
      <div class="login">
        <input type="text"
               class="login-input"
               placeholder="请输入手机号码"
               v-model="phone"
               @input="handleChangePhone">
        <input type="password"
               class="login-input"
               placeholder="请输入密码"
               v-model="password"
               v-show="showPassword">
        <common-button @submit="handleSubmit"
                       :content="buttonTitle"></common-button>
        <div class="forget">
          <common-agreement @isShow="handleShow"
                            @getProtocol="handleGetProtocol"
                            @changeIsSelect="handleChangeSelect"
                            :isSelect="isSelect"></common-agreement>
          <p class="forget-password"
             @click.stop="handleForget">忘记密码?</p>
        </div>
      </div>
    </div>
    <van-popup v-model="show"
               @click-overlay="handleHide"
               class="popup">
      <div class="agreement-content">{{protocol}}</div>
    </van-popup>
  </div>
</template>
<script>
import CommonHeader from 'common/header/header'
import CommonButton from 'common/button/button'
import CommonAgreement from 'common/agreement/agreement'
export default {
  name: 'Login',
  components: {
    CommonHeader,
    CommonButton,
    CommonAgreement
  },
  data () {
    return {
      headerTitle: '登录',
      buttonTitle: '登录',
      show: false,
      phone: '',
      showPassword: false,
      password: '',
      timer: null,
      protocol: '',
      isSelect: true
    }
  },
  methods: {
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.$toast.loading({
          duration: 0,
          mask: false,
          message: '登陆中...'
        })
        this.getLogin()
      }
    },
    getLogin () {
      const account = this.phone
      const password = this.password
      this.$api.user.login({ account, password })
        .then(this.getLoginSucc)
        .catch((e) => {
          this.$toast.clear()
          this.$toast('网络异常请稍后再试')
        })
    },
    getLoginSucc (res) {
      // const path = this.$localStorage.get('authUrl')
      // const userInfo = this.$localStorage.get('USER_INFO')
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.$localStorage.set('USER_INFO', JSON.stringify(data.userinfo))
        this.$toast.clear()
        this.$router.push({
          path: '/borrow'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast({
          duration: 1000,
          message: res.msg
        })
      }
    },
    handleHide () {
      this.show = false
    },
    handleShow (flag) {
      this.show = flag
    },
    handleForget () {
      this.$router.push({
        path: '/forgetPassWord'
      })
    },
    handleChangePhone () {
      const reg = /^1[3456789]\d{9}/
      if (reg.test(this.phone)) {
        this.checkUser()
      } else {
        this.showPassword = false
      }
    },
    check () {
      const reg = /^1[3456789]\d{9}/
      if (!reg.test(this.phone)) {
        this.$toast({
          duration: 1000,
          message: '请输入正确的手机格式'
        })
        return false
      }
      if (this.password === '') {
        this.$toast({
          duration: 1000,
          message: '密码不能为空'
        })
        return false
      }
      if (!this.isSelect) {
        this.$toast({
          duration: 1000,
          message: '请确认协议'
        })
        return false
      }
      return true
    },
    // 检测用户
    checkUser () {
      let account = this.phone
      this.$api.user.check({ account })
        .then(this.checkUserSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    checkUserSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.showPassword = true
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast({
          duration: 1000,
          message: res.msg
        })
        this.$router.push({
          path: '/register'
        })
      }
    },
    // 获取协议
    handleGetProtocol (content) {
      this.protocol = content
    },
    // 改变协议
    handleChangeSelect () {
      this.isSelect = !this.isSelect
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.login-wrap >>> .van-popup
  border-radius 20px
  min-width 80%
  max-height 80%
  padding()
  padding-top 20px
  padding-bottom 20px

.login-wrap
  initPosition()
  padding-top 88px
  box-sizing border-box
  background-color $common_bgc_gray
  touch-action none

.login-box
  position relative

  .login
    position absolute
    top -100px
    left 50%
    transform translateX(-50%)
    width 682px
    padding-top 64px
    padding-left 56px
    padding-right 56px
    padding-bottom 56px
    box-sizing border-box
    background $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 32px

    .login-input
      width 100%
      height 92px
      background-color $common_bgc
      border 2px solid rgba(230, 230, 230, 1)
      border-radius 24px
      font-size $address
      font-weight 400
      color $footer_bgc
      text-indent 30px
      padding-right 30px
      box-sizing border-box
      margin-bottom 56px
      outline none

  .forget
    display flex
    justify-content space-between
    position absolute
    bottom -54px
    width 100%
    left 50%
    transform translateX(-50%)

    .forget-password
      font-size $common_fz
      font-weight 400
      color $original_price

.agreement-content
  width 100%
  height 100%
  overflow-y scroll
  background-color $common_bgc
  font-size $common_fz
  color $agreement_prefix
  line-height 45px
  overflow hidden
  border-radius 10px
</style>
